*,
::before,
::after {
  border-color: currentcolor;
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;

  // 解决移动端点击按钮会出现阴影的效果
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  -webkit-tap-highlight-color: transparent;
}

#app,
body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
  font-size: 16px;
  color: $app-font-color;
  background-color: $app-background-color;
}

a {
  color: $app-theme-color;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  outline: none;
  transition: color 0.2s ease;
}

a:active,
a:hover {
  text-decoration: none;
  outline: 0;
}

a:hover {
  color: $app-theme-color;
}

a:active {
  color: $app-theme-color;
}

/* 滚动条凹槽的颜色，还可以设置边框属性 */
*::-webkit-scrollbar-track-piece {
  background-color: $app-scrollbar-track-back-color;
  border-radius: $app-scrollbar-border-radius;
}

/* 滚动条的宽度 */
*::-webkit-scrollbar {
  width: $app-scrollbar-width;
  height: $app-scrollbar-height;
}

/* 滚动条的设置 */
*::-webkit-scrollbar-thumb {
  background-color: $app-scrollbar-thumb-back-color;
  border-radius: $app-scrollbar-border-radius;
  background-clip: padding-box;
}

/* 滚动条鼠标移上去 */
*::-webkit-scrollbar-thumb:hover {
  background-color: $app-scrollbar-thumb-back-color;
}

img {
  width: 100%;
  height: 100%;
  border-style: solid;
}

img,
video {
  height: auto;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
